<template>
  <main class="wh-full flex-col">
    <div
      v-if="$slots.title || $slots.action"
      class="px-20 pt-12 flex items-center auto-bg z-11"
      :style="styles"
    >
      <el-row type="flex" class="flex-1" justify="space-between" align="middle">
        <el-col flex="1">
          <slot name="title"></slot>
        </el-col>
        <el-col>
          <slot name="action"></slot>
        </el-col>
      </el-row>
    </div>

    <div class="flex-1 auto-bg flex-col overflow-hidden">
      <slot></slot>
    </div>
  </main>
</template>
<script setup lang="ts">
const props = withDefaults(
  defineProps<{
    showHeader?: boolean;
    title?: string | null;
    back?: boolean;
    border?: boolean;
  }>(),
  {
    showHeader: true,
    title: null,
    back: false,
    border: false,
  },
);

const styles = computed(() => {
  return props.border
    ? {
        boxShadow:
          "rgba(0, 0, 0, 0.1) 0 0 4px,rgba(9, 30, 66, 0.08) 0 1px 10px;",
      }
    : null;
});
</script>
